*{
  margin: 0;
  padding: 0;
}
body{
  background: url(../img/pic.jpg) no-repeat center center fixed;
  background-size: cover;
}
html,body{
  width:6.4rem;
  /*height: 100%;*/
  /*overflow: hidden;*/
  /*height:11.38rem;*/
}
#wrapper{
  width:5.8rem;
  /*height: 100%;*/
  /*height:10.78rem;*/
  padding: 0 0.3rem;
  position: relative;
  background: rgba(0,0,0,.6);
  /*剪切掉超出容器的模糊效果*/
  overflow: hidden;
}
#wrapper::after{
  /*设置伪元素的z-index值为负值，是为了不会影响父容器中的文字*/
  z-index: -1;
  position: absolute;
  content:"";
  /*让伪元素的宽高撑满父元素的整个区域*/
  top:0;
  bottom:0;
  left:0;
  right:0;
  /*使blur()处理模糊的图片与背景图片相同*/
  background: url(../img/pic.jpg) no-repeat center center fixed;
  background-size: cover;
  /*对伪元素进行blur处理，不会影响到父元素中的文字效果，值越大，模糊效果越明显*/
/*            filter:blur(20px); */
  -webkit-filter:blur(0.2rem);
  /*消除边缘的模糊效果消退的问题*/
  margin: -0.3rem;
}
/*头部*/
#wrapper .header{
  width:5.8rem;
  overflow: hidden;
  color: #fff;
}
#wrapper .header .up{
  /*width:5.8rem;*/
  font-size:0.22rem;
  height: 0.7rem;
  line-height: 0.7rem;

}
#wrapper .header span{
  display: block;
  float: left;
}
#wrapper .header span.hLeft{
  width: 2rem;
}
#wrapper .header span.hCenter{
  width: 1.8rem;
}
#wrapper .header span.hRight{
  width: 2rem;
  text-align: right;
}
#wrapper .header .down{
  height: 0.5rem;
  line-height: 0.5rem;
  font-size:0.18rem;
  text-align: center;
}
/*选择*/
#wrapper .container{
  width: 5.8rem;
  overflow: hidden;
}
.container .nav{

  height:0.56rem;
  overflow: hidden;
}
.container .nav span{
  width: 0.8rem;
  height: 0.3rem;
  line-height: 0.3rem;
  text-align: center;
  display: block;
  float: left;
  color: #fff;
  border: 0.01rem solid #fff;
  border-radius: 0.04rem;
  font-size: 0.14rem;
  margin-top: 0.13rem;
  margin-right: 0.14rem;
}
.container .nav span:nth-of-type(1){
  margin-left:  1.3rem;
}
/*图片旋转*/
.container .picShow{
  margin-top: 0.1rem;
  overflow: hidden;
}
@keyframes rotate{
  from{
    transform: rotate(0);
  }
  to{
    transform: rotate(360deg);
  }
}
.container .picShow img{
  display: block;
  width: 5.6rem;
  height: 5.6rem;
  border: 0.1rem solid #464A4B;
  border-radius: 2.8rem;

}
/*歌词*/
.container .lyric{
  width: 5.6rem;
  margin-top: 0.2rem;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.28rem;
  color:#35BB7A;
}
/*音乐播放*/
.container .musicPlay{
  overflow: hidden;
  width: 5.8rem;
  margin-top: 0.4rem;
}
.musicPlay .progress{
  overflow: hidden;
}
.musicPlay .progress div{
    height: 0.26rem;
    line-height: 0.26rem;
    float: left;
    font-size: 0.12rem;
    color:#ACABAC;
}
.musicPlay .progress div.startTime{
  width: 0.66rem;
}
.musicPlay .progressBar{
  position: relative;
  width: 4.48rem;
}
.musicPlay .progressBar #ball{
  position: absolute;
  left: 0;
  top: 0;
  width: 0.26rem;
  height: 0.26rem;
  border-radius: 0.26rem;
  background: #31C27B;
}
.musicPlay .progressBar #playedO,.musicPlay .progressBar #playedT{
  width: 4.48rem;
  height: 0.1rem;
  background: #858385;
  margin-top: 0.08rem;
  float: left;
}
.musicPlay .progressBar #playedO{
  width: 0;
  background: #31C27B;
}
.musicPlay .progress div.endTime{
  width: 0.66rem;
  text-align: right;
}
/*上一曲，下一曲，暂停播放*/
.musicPlay .select{
  width: 5.8rem;
  height: 1.54rem;
  overflow: hidden;
}
.musicPlay .select span{
  border: 0.02rem solid #2FC67D;
  border-radius: 100%;
  color: #2FC67D;
  text-align: center;
  display: block;
  float: left;
}
.musicPlay .select span#prev,.musicPlay .select span#next{
  width: 0.59rem;
  height: 0.59rem;
  line-height: 0.59rem;
  font-size: 0.18rem;
  margin-left: 1.14rem;
  margin-top: 0.5rem;
}
.musicPlay .select span#playORpause{
  width: 0.89rem;
  height: 0.89rem;
  line-height: 0.89rem;
  font-size: 0.4rem;
  margin-left: 0.64rem;
  margin-top: 0.3rem;
}
.musicPlay .select span#next{
  margin-left: 0.64rem;
}
/*高级选项*/
.container .playSelect{
  width: 5.8rem;
  height: 0.76rem;
  display: flex;
  flex-flow: row;
  justify-content: space-around;
  align-items: center;
}
.container .playSelect div{
  width: 1.16rem;
  line-height: 0.76rem;
  text-align: center;
  font-size: 0.3rem;
  color: #fff;
}
